<template>
  <div class="home-con">
    <el-row>
      <el-col :span="8" v-for="(item, index) in dingdanArr" :key="index">
        <div class="dd_item">
            <div><img :src="item.img" /></div>
            <div class="dd_text">
                <span>{{ item.name }}</span>
                <span>{{ item.price }}</span>
            </div>
        </div>
        </el-col>
    </el-row>
    <div class="Pending">
      <div class="Pending_top"><span>待处理事务</span></div>
      <div class="Pending_con">
         <el-row :gutter="20">
            <el-col :span="6"><div class="grid-content bg-purple">待付款订单 <span>(10)</span></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">已完成订单 <span>(10)</span></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">待确认收货订单 <span>(10)</span></div></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6"><div class="grid-content bg-purple">待发货订单 <span>(10)</span></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">新缺货登记 <span>(10)</span></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">待处理退款申请 <span>(10)</span></div></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6"><div class="grid-content bg-purple">已发货订单 <span>(10)</span></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">待处理退货订单 <span>(10)</span></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple">广告位即将到期 <span>(10)</span></div></el-col>
          </el-row>
      </div>
    </div>
     <div class="con">
          <div class="good">
            <div class="goodtop">商品总览</div>
            <div class="goods">
              <div><span class="shuju">100</span>已下架</div>
              <div><span class="shuju">400</span>已上架</div>
              <div><span class="shuju">50</span>库存紧张</div>
              <div><span class="shuju">500</span>全部商品</div>
            </div>
          </div>
          <div class="use">
            <div class="usetop">用户总览</div>
            <div class="uses">
              <div><span class="shuju">100</span>今日新增</div>
              <div><span class="shuju">400</span>昨日新增</div>
              <div><span class="shuju">1000</span>本月新增</div>
              <div><span class="shuju">5000</span>会员总数</div>
            </div>
          </div>
      </div>
      <div class="order">
            <div class="orderTop">订单统计</div>
            <div class="divBox">
              <div class="orderLeft">
                <div class="census">
                  <div>本月订单统计</div>
                  <div>10000</div>
                  <div><span class="up">+10%</span>同比上月</div>
                </div>
                <div class="census">
                  <div>本周订单总数</div>
                  <div>1000</div>
                  <div><span class="down">-10%</span>同比上周</div>
                </div>
                <div class="census">
                  <div>本月销售总额</div>
                  <div>10000</div>
                  <div><span class="up">+10%</span>同比上月</div>
                </div>
                <div class="census">
                  <div>本周销售总额</div>
                  <div>10000</div>
                  <div><span class="down">-10%</span>同比上周</div>
                </div>
            </div>
            <div id="main"  style="width: 500px; height: 400px"></div>
            </div>
      </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "home",
  data: function () {
    return {
      dingdanArr: [
        {
          id: 1,
          name: "今日订单总数",
          price: "200",
          //在 js里面获取 vue项目的本地图片 ，需要使用  require
          img: require("@/assets/images/home_order.png"),
        },
        {
          id: 2,
          name: "今日销售总额",
          price: "￥300",
          img: require("@/assets/images/home_today_amount.png"),
        },
        {
          id: 3,
          name: "昨日销售总额",
          price: "￥400",
          img: require("@/assets/images/home_yesterday_amount.png"),
        },
      ],
    };
  },
  mounted () {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ]
        }
    ]
};

option && myChart.setOption(option);
  }
};
</script>

<style scoped>
.home-con {
  padding-top: 80px;
  padding-left: 18px;
}
.dd_item {
  border: 1px solid #ccc;
  margin: 5px;
  display: flex;
  justify-content: space-around;
  padding: 10px;
  border-radius: 5px;
}
.dd_item img{
  width: 50px;
}
.dd_item .dd_text{
  padding-left: 10px;
}
.dd_item .dd_text span{
  margin-top: 10px;
  display: block;
}
.dd_item .dd_text span:first-of-type{
  margin-top: 0;
}
.dd_item .dd_text span:last-of-type{
  text-align: center;
  color:blue;
}
/***************************** 待处理 ****************************/ 
.Pending{
  width: 100%;
  height: 275px;
  margin-top: 20px;
  border: 1px solid #ccc;
}
.Pending .Pending_top{
  height: 50px;
  background: #d3e2f8;
  padding-top: 25px;
  padding-left: 20px;
}
.Pending .grid-content{
  display: flex;
  justify-content: space-between;
  margin-left: 50px;
  margin-top: 30px;
  border-bottom: 1px solid #ccc;
}
.Pending .Pending_con{
  margin: 0 auto;
}
.Pending .Pending_con .el-row{
  display: flex;
  justify-content: space-around;
}
.Pending .Pending_con span{
  color: #f7826c;
}
/***************************** 待处理 ****************************/ 

/***************************** 用户商品 ****************************/ 
.con{
  width: 100%;
  height: 180px;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.con .good,.con .use{
  width: 45%;
  height: 180px;
  border: 1px solid #ccc;
}
.con .good .goodtop,.con .use .usetop{
  height: 45px;
  background: #d3e2f8;
  padding-top: 25px;
  padding-left: 20px;
}
.con .good .goods,.con .use .uses{
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}
.con .good .goods span,.con .use .uses span{
  display: block;
  text-align: center;
  margin-bottom: 10px;
  color: #f7826c;
}
/***************************** 用户商品 ****************************/

/***************************** 订单 ****************************/ 
.order{
  width: 100%;
  height: 470px;
  margin-top: 20px;
  border: 1px solid #ccc;
}
.order .orderTop{
  height: 45px;
  background: #d3e2f8;
  padding-top: 25px;
  padding-left: 20px;
}
.order .orderLeft{
  width: 20%;
  height: 400px;
  border-right: 1px solid #ccc;
}
.order .orderLeft div{
  display: block;
  padding-top: 10px;
  padding-left: 15px;
}
.order .orderLeft div .census{
  height: 80px;
  margin-top: 15px;
}
.orderLeft .census div .up{
  color: green;
}
.orderLeft .census div .down{
  color: red;
}
.divBox{
  display: flex;
}
#main{
  margin:0 auto;
}
/***************************** 订单 ****************************/ 
</style>
